<template>
  <div>
    <Vheader title="签到"></Vheader>
    <div class="v-wrapper" ref="checkIn">
      <div class="v-container">
        <div class="checkIn-box">
          <div class="checkIn-btn">{{qiandao}}</div>
          <div class="checkIn-text"><span>今日签到可领获得<span>{{reward}}</span></span></div>
        </div>
        <div class="date-title">
          <i class="iconfont icon-date"></i>
          <p>{{year}}年{{month}}月{{day}}日</p>
        </div>
        <div class="calendar">
          <table cellspacing="1" cellpadding="1">
            <thead class="thead">
            <tr>
              <td>日</td>
              <td>一</td>
              <td>二</td>
              <td>三</td>
              <td>四</td>
              <td>五</td>
              <td>六</td>
            </tr>
            </thead>
            <tbody class="tbody"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue'
  import {$} from '../../common/config'
  import BScroll from 'better-scroll'
  import axios from "../../axios/axios";
  import {Toast} from 'mint-ui';

  export default {
    data() {
      return {
        year: '',
        month: '',
        day: '',
        Signed: [],
        reward: '',
        wk: true,
        qiandao: '签到'
      };
    },
    mounted() {
      var checkInBtn = $('.checkIn-btn');
      var sliarrn = this.Signed;
      var that = this;
      var $tbody = $('.tbody'),
        slidate = new Date(),
        _nullnei = '',
        de = slidate.getDate();//当前日期
      this.year = slidate.getFullYear();//年
      this.month = slidate.getMonth() + 1;//月
      this.day = slidate.getDate();//日
      var monthFirst = new Date(slidate.getFullYear(), parseInt(slidate.getMonth()), 1).getDay();//获取当月的1日等于星期几
      var d = new Date(slidate.getFullYear(), parseInt(slidate.getMonth() + 1), 0); //获取月
      var conter = d.getDate();//获取当前月的天数
      console.log('当前时间' + slidate);
      //遍历日历网格
      for (var i = 1; i <= 6; i++) {
        _nullnei += "<tr>";
        for (var j = 1; j <= 7; j++) {
          _nullnei += '<td></td>';
        }
        _nullnei += "</tr>";
      }
      $tbody.innerHTML = _nullnei;

      //遍历网格内容
      var $slitd = $tbody.querySelectorAll("td");
      for (let k = 0; k < conter; k++) {
        $slitd[k + monthFirst].innerHTML = "<p>" + parseInt(k + 1) + "</p>";
      }
//      console.log($slitd);
//      console.log(de)
      //查询签到列表
      var data = JSON.stringify({
        'actionName': 'queryListPage',
        'controllerName': 'userSign',
        'data': [{}, 1, 10]
      });
      var token = localStorage.getItem('userToken');
      if (token) {
        that.$root.tokenValidat(token, function (datas) {
          if (datas) {
            axios.post({
              data: data,
              callback(res) {
                console.log(res.data);
                if (res.data.data !== null) {
                  var check = res.data.data;
                  var sdate;
                  console.log(res.data);
                  for (var i = 0; i < check.length; i++) {
                    sdate = check[i].createTime.split(' ');
                    that.Signed.push(parseInt(sdate[0].split('-')[sdate[0].split('-').length - 1]));
                    console.log(sdate[0].split('-')[sdate[0].split('-').length - 1]);
                    if (that.day === parseInt(sdate[0].split('-')[sdate[0].split('-').length - 1])) {
                      that.qiandao = '已' + check[i].name;
                      that.reward = check[i].amount + '福元';
                    }
                  }
                  console.log(that.Signed);
                  Funmonth();//查询已签到
                }
              }
            })
          } else {
            that.$router.push('/login');
          }
        });
      } else {
        this.$router.push('/login');
      }
//      console.log(monthFirst);
      Funback();//给当前日加样式
      Funmore();//本月未签到样式

      //点击签到
      checkInBtn.onclick = function () {
        var checkData = JSON.stringify({
          'actionName': 'insert',
          'controllerName': 'userSign',
          'data': [{}]
        });
        if (that.wk === true) {
          that.wk = false;
          that.qiandao = '已签到';
          axios.post({
            data: checkData,
            callback(res) {
              console.log(res.data);
              if(res.data.data.result===true){
                that.reward = '1福元';
              }else{
                Toast(res.data.data.remark);
              }

            }
          });
          sliarrn.push(de - 1);//把当日传入已签
          console.log(sliarrn);
          Funmonth();	//再次查询签到
        }
      };

      //给当前日加样式
      function Funback() {
        $slitd[parseInt(de) - 1 + monthFirst].classList.add('color');
      }

      //本月未签到样式

      function Funmore() {
        for (var i = 0; i < de; i++) {
          $slitd[i + monthFirst].classList.add('weiqian');
          console.log(i + monthFirst);
        }
      }

      //查询已签到
      function Funmonth() {
        console.log('查询' + JSON.stringify(sliarrn));
        console.log('查询' + conter);
        for (var i = 0; i <= conter; i++) {
          for (var j = 0; j < sliarrn.length; j++) {
            if (i === sliarrn[j]) {
              $slitd[monthFirst + i - 1].classList.add('los');
              console.log($slitd[monthFirst + i - 1]);
              console.log('1111');
            }
          }
        }
      }

      //页面滚动
      this._initScroll();
    },
    methods: {
      checkIn: function () {
        var that = this;

      },
      _initScroll: function () {
        this.checkInScroll = new BScroll(this.$refs.checkIn, {click: true})
      }
    },
    components: {Vheader}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";

  .checkIn-box {
    width: 100%;
    height: 180px;
    background: url("../../common/img/qdtop.png") no-repeat;
    background-size: cover;
    padding-top: 30px;
    box-sizing: border-box;
    .checkIn-btn {
      width: 70px;
      height: 70px;
      text-align: center;
      line-height: 70px;
      border-radius: 100%;
      margin: auto;
      background: -webkit-linear-gradient(top, #3ce9ef, #2984e8);
      box-shadow: 0 1px 0 #999999;
      color: #FFFFFF;
    }
    .checkIn-text {
      width: 100%;
      text-align: center;
      color: #FFFFFF;
      padding-top: 10px;
      span {
        span {
          color: #e8a63c;
          padding-left: 10px;
        }
      }
    }
  }

  .date-title {
    width: 100%;
    height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    line-height: 44px;
    background-color: #FFFFFF;
    border-bottom: solid 2px #de0000;
    i {
      font-size: 20px;
      color: #de0000;
    }
    p {
      flex: 9;
      padding-left: 10px;
      vertical-align: top;
      font-size: 12px;
    }
  }

  .calendar {
    width: 100%;
    background: #ffffff;
    table {
      width: 100%;
      thead {
        background-color: #b9b9b9;
        tr {
          td {
            width: calc(100% / 7);
            height: 30px;
            text-align: center;
            font-size: 13px;
          }
        }
      }
      tbody {
        tr {
          td {
            width: calc(100% / 7);
            height: 40px;
            margin: 1px;
            background: #ececec;
            text-align: center;
            border: solid 1px #e3e3e3;
          }
        }
      }
    }
  }

  .color {
    background-color: #ffc27d !important;
    /*font-size: 30px;*/
  }

  .los {
    color: #de0000 !important;
    /*font-size: 30px;*/
  }

  .weiqian {
    color: #03A9F4;
    /*font-size: 30px;*/
  }
</style>
